<template>
    <div class="app-container">
        <div style="margin: 5px;">
            <div>
                <el-button size="small" type="primary" icon="el-icon-back" @click="back()">返回</el-button>
            </div>
        </div>
        <div class="upload_img-div" style="width:720px;height:100px;margin-top:20px">
            <el-upload
                list-type="picture-card"
                multiple
                :action="''"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :limit="30"
                :http-request="handlePost"
                :file-list="fileList">
                <i class="el-icon-camera"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" >
                <img width="100px" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { addAlbum,editAlbum,deleteImage } from '@/api/album'
import { upload } from '@/api/fileUpload'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
const defaultSettings = require('@/settings.js')
export default {
    name: "Album",
    // 设置数据字典
    components:{
        // 'album-add-and-edit':AddAndEdit,  //新增/编辑日志组件
    },
    computed: {
        ...mapGetters([
        'user'
        ])
    },
    data() {
        return{
            token:getToken(),
            uploadUrl:defaultSettings.devApiUrl+'album/uploadImage/',
            album:{
                id:'',
                userId:'',
                content:'',
            },
            dialogVisible:false,
            fileList:[],
            dialogImageUrl:'',
        }
    },
    created(){
        let album = this.$route.query.param
        if(album){
            this.album = album
            this.fileList = this.album.imgList
            console.log(JSON.stringify(this.album.imgList))
        }
    },
    mounted() {
    },
    methods:{
        handlePost(fileItem) {
            let param =new FormData();
            param.append('file',fileItem.file)
            let url = "/api/album/uploadImgs/"+this.album.id
            upload(url,param).then(res =>{
                if(res.data.code === 200){
                    this.$message.success('上传成功')
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file,fileList){
            // console.log(JSON.stringify(file))
            !!file.id && deleteImage(file.id)
            // this.form.delFileIds +=","+ file.id ;
        },
        back(){
            this.$router.push({path:'/blog/album'})
        },
    }
}
</script>

<style scoped>
.upload_img-div{
    margin-left: 5px;
}
.upload_img-div >>> .el-upload--picture-card{
    width: 100px;
    height: 100px;
    border-radius:2px;
}
.upload_img-div >>> .el-upload-list__item{
    width: 100px;
    height: 100px;
    border-radius:2px;
}
</style>